﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>等不及了，快上车！</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
<meta property="wb:webmaster" content="54ab09b40e734486" />
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>

<!--<link rel="stylesheet" href="/dist/css/swiper.min.css">
<link rel="stylesheet" href="/dist/css/animate.min.css">
<script src="/dist/js/swiper.min.js"></script>
<script src="/dist/js/swiper.animate.min.js"></script>-->

<style>
*{
	margin:0;
	padding:0;
}
html,body{
	height:100%;
}
body{
	font-family:"moekoufont";
	position: relative;
}

@font-face{
    		font-family: 'moekoufont';               /*自定义字体名称*/
		    /*src: url('font/HYLeMiaoTiJ.ttf');Safari,Android,iOS*/
		   src: url('font/HYLeMiaoTiJ.eot');
  			src:
	    url('font/HYLeMiaoTiJ.eot?#font-spider') format('embedded-opentype'),
	    url('font/HYLeMiaoTiJ.woff') format('woff'),
	    url('font/HYLeMiaoTiJ.ttf') format('truetype'),
	    url('font/HYLeMiaoTiJ.svg') format('svg');
		    font-weight: normal;
		    font-style: normal;
		}
				
.swiper-container {
  /*  width: 320px;
    height: 480px;*/
	width: 100%;
    height: 100%;
	background:#000;

  
}  

.swiper-slide{
	/*width:100%;
	height:100%;
	background:url(upload/bg.jpg) no-repeat left top;
	background-size:100% 100%;*/
}

.swiper-slide1{
	width:100%;
	height:100%;
	background:url(img/h5_1.png) no-repeat top center;
	background-size:100% 100%;
}

.swiper-slide2{
	width:100%;
	height:100%;
	background:url(img/h5_2.png) no-repeat top center;
	background-size:100% 100%;
}

.swiper-slide3{
	width:100%;
	height:100%;
	background:url(img/h5_3.png) no-repeat top center;
	background-size:100% 100%;
}

.swiper-slide4{
	width:100%;
	height:100%;
	background:url(img/h5_4.png) no-repeat top center;
	background-size:100% 100%;
}

.swiper-slide5{
	width:100%;
	height:100%;
	background:url(img/h5_5.png) no-repeat top center;
	background-size:100% 100%;
}

.swiper-slide6{
	width:100%;
	height:100%;
	background:url(img/h5_6.png) no-repeat top center;
	background-size:100% 100%;
}

.swiper-slide7{
	width:100%;
	height:100%;
	background:url(img/h5_7.png) no-repeat top center;
	background-size:100% 100%;
}

img{
	display:block;
}
.swiper-pagination-bullet {
width: 6px;
height: 6px;
background: #fff;
opacity: .4;
}
.swiper-pagination-bullet-active {
opacity: 1;
}
@-webkit-keyframes start {
	0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
	60% {opacity: 1;-webkit-transform: translate(0,0);}
	100% {opacity: 0;-webkit-transform: translate(0,-8px);}
}
@-moz-keyframes start {
	0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
	60% {opacity: 1;-moz-transform: translate(0,0);}
	100% {opacity: 0;-moz-transform: translate(0,-8px);}
}
@keyframes start {
	0%,30% {opacity: 0;transform: translate(0,10px);}
	60% {opacity: 1;transform: translate(0,0);}
	100% {opacity: 0;transform: translate(0,-8px);}
}
.ani{
	position:absolute;
	}
.txt{
	position:absolute;
}
#array{
	position:absolute;z-index:999;-webkit-animation: start 1.5s infinite ease-in-out;
}

.kill,.family,.mount,.av,.food,.pack{
	padding-right: 10px;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}

.kill p{
	font-family: 'moekoufont';
	text-indent: 15px;
	
}

.kill div{
	text-indent: 15px;
}

ul{
	margin-top: 8px;
	list-style: none;
}

ul li{
	line-height: 25px;
}

.kill_error,.kill_yes,.family_yes,.family_error,.mount_error,.mount_yes,.av_error,.av_yes,.food_error,.food_yes{
	display: none;
}

.pack{
	text-indent: 15px;
}

div{
	text-indent: 15px;
}

.fade{
	background-image: url(img/ban.png);
    background-size:100% 90%;
    background-repeat: no-repeat;
    padding: 10px 20px;
    text-indent: 15px;
    box-sizing: border-box;
    text-align: center;
}
#audioPlay {
		  width:40px;
		  height:40px;
		  background-image: url("img/music_open.png");
		  background-repeat: no-repeat;
		  background-size: 100% 100%;
		  position: fixed;
		  bottom: 10px;
		  right: 10px;
		  z-index: 9999999;
		  -webkit-animation:circle 2s infinite linear;/*匀速 循环*/
		}
		
@-webkit-keyframes circle{
		0%{ transform:rotate(0deg); }
		100%{ transform:rotate(-360deg); }
		}
.musiclogo{
			animation-play-state:paused;
		}
		
.cover{
		position:fixed; 
		top: 0px; 
		right:0px; 
		bottom:0px;
		filter: alpha(opacity=60); 
		background-color: #777;
		z-index: 1002; 
		left: 0px; 
		display:none;
		opacity:0.5; 
		-moz-opacity:0.5;
	}	

#right_arrow{
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 99999;
	transform: rotate(-40deg);
	-ms-transform: rotate(-40deg); /* IE 9 */
	-webkit-transform: rotate(-40deg); /* Safari and Chrome */
	-webkit-animation: wt 1s infinite; /* Safari and Chrome */
	animation: wt 1s infinite;
	animation-timing-function:linear;
	display: none;
}
#right_arrow img{
	width:60px;
	height:60px;
}

@keyframes wt{
	from{top:0px;}
	to{top: 10px;}
}
@-webkit-keyframes wt{
	from{top:0px;}
	to{top: 10px;}
}
</style>
</head>

<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
    	<section class="swiper-slide swiper-slide1">
    	<img src="img/h5-1.gif"  class="ani resize" style="width:320px;height:146px;left:0px;top:180px;z-index:1;" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s"  >
        <img src="img/amajunword.png" class="ani resize" style="width:250px;height:44px;left:35px;top:300px;z-index:3;" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s"  >
    	</section>
        <section class="swiper-slide swiper-slide2">
        <div class="ani resize kill" style="width:320px;height:64px;left:0px;top:10px;z-index:5; " swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s"  >
        	<p class="ani resize" swiper-animate-effect="fadeOut" swiper-animate-duration="1s"  swiper-animate-delay="6s">日本的高自杀率世界闻名，近年来的年均自杀人数超过了3万人，平均每天有80人以上的日本人自杀。一些特殊地点因为频繁有自杀事件发生而被冠上了“自杀圣地”的称号。</p>
        	<div class="ani resize choose" swiper-animate-effect="zoomIn" swiper-animate-duration="1s"  swiper-animate-delay="6s">
        		那么问题来了：以下哪一个电车站不属于“自杀圣地”？
        		<ul class="kill_j">
        		<li>A、青木原树海</li>
        		<li>B、清水寺</li>
        		<li>C、东日本铁道JR中央线</li>
        		<li>D、三原山火山</li>
        		</ul>
        	</div>
        	<div class="kill_yes ani resize" swiper-animate-effect="hide" swiper-animate-duration="0s"  swiper-animate-delay="0s">
        		答对咯！日本的青木原树海、清水寺和三原山火山都是世界闻名的自杀圣地，在上面三个地方分别可以采取在原始森林中上吊、在寺庙高阁上跳崖和纵身入火山口焚身于熔岩这样的非常“浪漫”的自杀方式。但社会影响最为恶劣的还是日本跳轨事件频发，平均每年有600人以上死于跳轨，造成了十分恶劣的社会影响，所以有人戏称日本的铁道才是真正的“自杀圣地”。
        	</div>
        	<div class="kill_error ani resize" swiper-animate-effect="hide" swiper-animate-duration="0s"  swiper-animate-delay="0s">
        		不对哟！日本的青木原树海、清水寺和三原山火山都是世界闻名的自杀圣地，在上面三个地方分别可以采取在原始森林中上吊、在寺庙高阁上跳崖和纵身入火山口焚身于熔岩这样的非常“浪漫”的自杀方式。但社会影响最为恶劣的还是日本跳轨事件频发，平均每年有600人以上死于跳轨，造成了十分恶劣的社会影响，所以有人戏称日本的铁道才是真正的“自杀圣地”。
        	</div>
        </div>
    	<img src="img/h5-2-gif.gif"  class="ani resize" style="width:320px;height:112px;left:0px;top:360px;z-index:1;" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.3s"  >
        </section>
        <section class="swiper-slide swiper-slide3">
        	<div class="ani resize food" style="width:320px;height:64px;left:0px;top:10px;z-index:5; " swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s"  >
        	<p class="ani resize" swiper-animate-effect="fadeOut" swiper-animate-duration="1s"  swiper-animate-delay="6s">有些人会误以为日本的东西比国内好吃，这绝逼是错觉！日本的饮食比中国low太多了！其主要的根据是，日本人食用的食材的品类实在太少，很多中国菜中的美味佳肴在日本都难以实现。</p>
        	<div class="ani resize choose" swiper-animate-effect="zoomIn" swiper-animate-duration="1s"  swiper-animate-delay="6s">
        		猜猜看，以下哪种食物是日本人所不能接受的？
        		<ul class="kill_j">
        		<li>A、肠</li>
        		<li>B、舌</li>
        		<li>C、蹄</li>
        		<li>D、肝</li>
        		</ul>
        	</div>
        	<div class="food_yes ani resize" swiper-animate-effect="hide" swiper-animate-duration="0s"  swiper-animate-delay="0s">
        		答对咯！日本人对于肉类的食用部分非常挑剔，基本上头不吃尾不吃脚不吃血不吃内脏不吃……一头动物最后会出现在日本餐桌的只剩寥寥几个部分的肉而已。但是虽然日本家庭一般不吃内脏，但在某些日式烧烤店中，烤内脏却是一道人气菜肴。
        	</div>
        	<div class="food_error ani resize" swiper-animate-effect="hide" swiper-animate-duration="0s"  swiper-animate-delay="0s">
        		不对哟！日本人对于肉类的食用部分非常挑剔，基本上头不吃尾不吃脚不吃血不吃内脏不吃……一头动物最后会出现在日本餐桌的只剩寥寥几个部分的肉而已。但是虽然日本家庭一般不吃内脏，但在某些日式烧烤店中，烤内脏却是一道人气菜肴。
        	</div>
        </div>
    	<img src="img/h5-2-gif.gif"  class="ani resize" style="width:320px;height:112px;left:0px;top:360px;z-index:1;" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.3s"  >
        </section>
        <section class="swiper-slide swiper-slide4">
        	<div class="ani resize family" style="width:320px;height:64px;left:0px;top:10px;z-index:5; " swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s"  >
        	<p class="ani resize" swiper-animate-effect="fadeOut" swiper-animate-duration="1s"  swiper-animate-delay="6s">许多人对日本有“日本人在性方面很开放”、“日本人很随便”的印象，造成这种认识的原因之一是日本的婚外恋现象比较高发。确实，在日本有“婚外恋是一种文化”一说，甚至还是一句流行语。</p>
        	<div class="ani resize choose" swiper-animate-effect="zoomIn" swiper-animate-duration="1s"  swiper-animate-delay="6s">
        		你知道“婚外恋是一种文化”这句话最初是由谁提出的吗？
        		<ul class="kill_j">
        		<li>A、石田纯一</li>
        		<li>B、川端康成</li>
        		<li>C、三岛由纪夫</li>
        		<li>D、坂田银时</li>
        		</ul>
        	</div>
        	<div class="family_yes ani resize" swiper-animate-effect="hide" swiper-animate-duration="0s"  swiper-animate-delay="0s">
        		答对咯！日本艺人石田纯一曾在婚外恋曝光回答记着提问时辩解道，很多优秀的文艺作品都是从婚外恋中诞生出来的，婚外恋者不该因此遭受唾弃。后来媒体将这番言论总结成了“婚外恋是一种文化”，并且迅速在日本国内流传了开来。所以这句话的由来并非与石田纯一的原话完全吻合，具有一定的讹传和戏谑的性质。
        	</div>
        	<div class="family_error ani resize" swiper-animate-effect="hide" swiper-animate-duration="0s"  swiper-animate-delay="0s">
        		不对哟！日本艺人石田纯一曾在婚外恋曝光回答记着提问时辩解道，很多优秀的文艺作品都是从婚外恋中诞生出来的，婚外恋者不该因此遭受唾弃。后来媒体将这番言论总结成了“婚外恋是一种文化”，并且迅速在日本国内流传了开来。所以这句话的由来并非与石田纯一的原话完全吻合，具有一定的讹传和戏谑的性质。
        	</div>
        </div>
    	<img src="img/h5-2-gif.gif"  class="ani resize" style="width:320px;height:112px;left:0px;top:360px;z-index:1;" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.3s"  >
        </section>
        <section class="swiper-slide swiper-slide5">
        	<div class="ani resize mount" style="width:320px;height:64px;left:0px;top:10px;z-index:5; " swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s"  >
        	<p class="ani resize" swiper-animate-effect="fadeOut" swiper-animate-duration="1s"  swiper-animate-delay="8s">日本人很喜欢用“三”来列举一些事物，比如什么日本三景、日本三大名瀑布、日本三大名桥、日本三大名城、日本三大神宫……几乎数不胜数。所在当听说某一个东西是日本三大什么之一的时候，千万不要觉得它很牛逼，因为日本这种三大的东西实在太多了，有些甚至都没有统一到底是哪三个。</p>
        	<div class="ani resize choose" swiper-animate-effect="zoomIn" swiper-animate-duration="1s"  swiper-animate-delay="8s">
        		传说中的日本“三大景“，以下哪一个不在列？
        		<ul class="kill_j">
        		<li>A、松岛</li>
        		<li>B、富士山</li>
        		<li>C、宫岛</li>
        		<li>D、天桥立</li>
        		</ul>
        	</div>
        	<div class="mount_yes ani resize" swiper-animate-effect="hide" swiper-animate-duration="0s"  swiper-animate-delay="0s">
        		答对咯！德川幕府初期，儒学者林春斋在其著作的《日本国事迹考》中些道：“丹后天桥立，陆奥松岛，安艺严岛（即宫岛），为三处奇观”，这被认为是“日本三景”最早的出处。相对于其他“日本三大XX”，“日本三景”算是相对靠谱的，比较值得一去。
        	</div>
        	<div class="mount_error ani resize" swiper-animate-effect="hide" swiper-animate-duration="0s"  swiper-animate-delay="0s">
        		不对哟！德川幕府初期，儒学者林春斋在其著作的《日本国事迹考》中些道：“丹后天桥立，陆奥松岛，安艺严岛（即宫岛），为三处奇观”，这被认为是“日本三景”最早的出处。相对于其他“日本三大XX”，“日本三景”算是相对靠谱的，比较值得一去。
        	</div>
        </div>
    	<img src="img/h5-2-gif.gif"  class="ani resize" style="width:320px;height:112px;left:0px;top:360px;z-index:1;" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.3s"  >
        </section>
        <section class="swiper-slide swiper-slide6">
        	<div class="ani resize av" style="width:320px;height:64px;left:0px;top:10px;z-index:5; " swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s"  >
        	<p class="ani resize" swiper-animate-effect="fadeOut" swiper-animate-duration="1s"  swiper-animate-delay="6s">日本以性产业发达而著称，在一些列的性产业中，大家最熟悉的恐怕就是AV了吧？日本的AV女优非常的多，这个数字大得超乎你的想象</p>
        	<div class="ani resize choose" swiper-animate-effect="zoomIn" swiper-animate-duration="1s"  swiper-animate-delay="6s">
        		那么，你觉得日本每年有多少女优从事AV拍摄呢？
        		<ul class="kill_j">
        		<li>A、1000人</li>
        		<li>B、10000人</li>
        		<li>C、50000人</li>
        		<li>D、100000人</li>
        		</ul>
        	</div>
        	<div class="av_yes ani resize" swiper-animate-effect="hide" swiper-animate-duration="0s"  swiper-animate-delay="0s">
        		答对咯！日本每年进行AV拍摄的女优有近万人，而且AV女优的更新换代非常快，据统计日本注册在籍的AV女优有十多万之多。根据人口比例计算的话，在日本，每50个19-29岁的日本女性中，就会有一个进行过AV拍摄。
        	</div>
        	<div class="av_error ani resize" swiper-animate-effect="hide" swiper-animate-duration="0s"  swiper-animate-delay="0s">
        		不对哟！日本每年进行AV拍摄的女优有近万人，而且AV女优的更新换代非常快，据统计日本注册在籍的AV女优有十多万之多。根据人口比例计算的话，在日本，每50个19-29岁的日本女性中，就会有一个进行过AV拍摄。
        	</div>
        </div>
    	<img src="img/h5-2-gif.gif"  class="ani resize" style="width:320px;height:112px;left:0px;top:360px;z-index:1;" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.3s"  >
        </section>
        <section class="swiper-slide swiper-slide7">
        <div class="ani resize pack" style="width:320px;height:64px;left:0px;top:10px;z-index:5; " swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s"  >
        	如果你也想get更多有关日本的冷知识，别错过这班车！微博关注“<span style="font-size: 25px;">无证司机阿玛君</span>”,超业余不正经的阿玛君将带你科普各种岛国冷知识！
        </div>
        <div   class="ani resize fade" style="width:320px;height:150px;left:0px;top:140px;z-index:1;position: relative;display: none;" swiper-animate-effect="zoomInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">
       	<p></p>
       	<img src="img/index.png" class="ani resize index" style="width:90px;height:32px;z-index:5; display: block;position: absolute;bottom: 40px;left: 25px;"/>
        <img src="img/share.png" class="ani resize share" style="width:90px;height:32px;z-index:5; display: block;position: absolute;bottom: 40px;right: 25px;"/>
        </div>
    	<img src="img/gift.gif" class="ani resize giftclick" style="width:160px;height:116px;left:85px;top:320px;z-index:4;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s"  > 
        <img src="img/mud.png" class="ani resize" style="width:160px;height:46px;left:85px;top:420px;z-index:3;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.4s"  > 
       </section>
    </div>
    
   <img src="img/arrow.png" style="width:20px;height:15px; top:460px; left:150px;" id="array" class="resize"> 
  <div class="swiper-pagination" style="display: none;"></div>
  <div id="audioPlay">
  	<audio id="music" autoplay="" loop src="http://game.gtimg.cn/images/yxzj/act/a20160511pvp/sounds/bg.mp3">
  		
  	</audio>
  </div>
  <div id="right_arrow">
  	<img  src="img/send.png">
  </div>
</div>
<div id="cover" class="cover"></div>
<script>  

var StrArry =new Array(
"你知道吗，岛国的iPhone拍照声无法关闭哦，慎买！",
"为什么日本的水果大多是进口的？因为日本本土产的水果价格比进口的要贵得多！",
"日本的自动售货机普及率相当高，大约每3家小店就有2家拥有！",
"日本熟食保质期是20个小时，所以每晚商场会把熟食打半价买，还是晚上再去逛商场吧！",
"日本食物中毒事件为世界最低，为0.0000012%，也就是说一年日本只有120人中毒！",
"日本网速位居世界第一，那么抢红包会很容易哦！",
"关东煮原来是受中国麻辣烫的启发，但日本人不喜欢辣的，所以发明了关东煮",
"在日本的中国人有大约400万，中国街也有很多哟~",
"日本人爱猫，甚至流浪猫都是很干净的，还会胖胖的.因为人们都会帮他洗一下，还会给它吃东西！",
"日本的空气位居世界前3甲，树木覆盖率达到65％以上"
);

scaleW=window.innerWidth/320;
scaleH=window.innerHeight/480;
var resizes = document.querySelectorAll('.resize');
          for (var j=0; j<resizes.length; j++) {
           resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px';
		   resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px';
		   resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px';
		   resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px'; 
          }
		  
  var mySwiper = new Swiper ('.swiper-container', {
   direction : 'vertical',
   pagination: '.swiper-pagination',
  //virtualTranslate : true,
   mousewheelControl : true,
   onInit: function(swiper){
   swiperAnimateCache(swiper);
   swiperAnimate(swiper);
	  },
   onSlideChangeEnd: function(swiper){
	swiperAnimate(swiper);
    },
	onTransitionEnd: function(swiper){
	swiperAnimate(swiper);
    },
	
	
	watchSlidesProgress: true,

      onProgress: function(swiper){
        for (var i = 0; i < swiper.slides.length; i++){
          var slide = swiper.slides[i];
          var progress = slide.progress;
          var translate = progress*swiper.height/4;  
		  scale = 1 - Math.min(Math.abs(progress * 0.5), 1);
          var opacity = 1 - Math.min(Math.abs(progress/2),0.5);
          slide.style.opacity = opacity;
		  es = slide.style;
		  es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,'+translate+'px,-'+translate+'px) scaleY(' + scale + ')';

        }
      },
	
	   onSetTransition: function(swiper, speed) {
        for (var i = 0; i < swiper.slides.length; i++){
          es = swiper.slides[i].style;
		  es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms';

        }
      },
	
	
	
	   })    
	   
	   $(function(){
	   	
	   	$(".kill li").click(function(){
	   		var kill_j_index = $(this).index();
	   		$(".kill .choose").hide(500);
	   		if(kill_j_index == 2){
	   			$(".kill_yes").show(500);
	   		}else{
	   			$(".kill_error").show(500);
	   		}
	   	});
	   	
	   	$(".food li").click(function(){
	   		var kill_j_index = $(this).index();
	   		$(".food .choose").hide(500);
	   		if(kill_j_index == 2){
	   			$(".food_yes").show(500);
	   		}else{
	   			$(".food_error").show(500);
	   		}
	   	});
	   	
	   		$(".family li").click(function(){
	   		var kill_j_index = $(this).index();
	   		$(".family .choose").hide(500);
	   		if(kill_j_index == 0){
	   			$(".family_yes").show(500);
	   		}else{
	   			$(".family_error").show(500);
	   		}
	   	});
	   	
	   	$(".mount li").click(function(){
	   		var kill_j_index = $(this).index();
	   		$(".mount .choose").hide(500);
	   		if(kill_j_index == 1){
	   			$(".mount_yes").show(500);
	   		}else{
	   			$(".mount_error").show(500);
	   		}
	   	});
	   	
	   	$(".av li").click(function(){
	   		var kill_j_index = $(this).index();
	   		$(".av .choose").hide(500);
	   		if(kill_j_index == 1){
	   			$(".av_yes").show(500);
	   		}else{
	   			$(".av_error").show(500);
	   		}
	   	});
	   	
	   	$(".giftclick").click(function(){
	   		var ran = Math.floor(Math.random()*10);
	   		$(".fade p").html("<br>&nbsp;&nbsp;"+StrArry[ran]);
	   		$(".fade").show();
	   	});
	   	
	   	$(".share").click(function(){
	    	$("#cover").show();
	    	$("#right_arrow").show(500);
	    });
	   	
	   	$(".cover").click(function(){
	   		$(this).hide();
	   		$("#right_arrow").hide();
	   	});
	   	
	   	$(".index").click(function(){
	   		window.location.href="index.html";
	   	});
	   	
	   });
	   var music = document.getElementById("music");//获取ID
	    $("#audioPlay").on('click',function(){
	        if(music.paused){
	            music.play();
	            $(this).css("animation-play-state","");
	            this.style.backgroundImage="url(img/music_open.png)";
	        }else{
	            music.pause();
	            $(this).css("animation-play-state","paused");
	            this.style.backgroundImage="url(img/music_close.png)";
	        }
    });
	   
  </script>
</body>
</html>
